<template>
	<view class="topNav flex-between">
		<!-- <view class="address flex-center" >
			<m-icon :size="[105,55]" color="#fff" type="logo" spa="0 0 0 15" />
		</view> -->
		<!-- <view class="address flex-center" v-if="city" @click="Jump('/pages/mine/country/country')">
			<text>{{city}}</text>
			<m-icon size="30" color="#fff" type="icon-xiala" spa="0 0 0 15" />
		</view> -->
		<view class="search-Item flex" @click="Jump('/pages/home/search/search')">
			<m-icon color="#C5C5C5" size="34" type="icon-fangdajing" />
			<input type="search" v-model="search" placeholder="请输入商品名称" placeholder-class="placeholder-class">
		</view>
		<view class="">
			
		</view>
		<view class="msg_icon flex">
			<!-- 扫一扫 -->
			<!-- <m-icon color="#fff" class="ptb-8 plr-16 ml-12" size="40" type="icon-saoyisao" @click="getQrcode" /> -->
			<!-- 客服 -->
			<!-- <view class="" style="position: relative;">
				<m-icon color="#fff" size="40" class="ptb-8 plr-16" type="icon-xiaoxi" @click="goChat()" />
				<text v-if="unreadcount" class="pointState animImage">{{unreadcount}}</text>
			</view> -->
		</view>
	</view>
</template>

<script>
	const qrcode = require('@/utils/reqrcode.js');
	import { getmsgtitle } from "@/api/msg.js"
	import { mapState, mapActions } from 'vuex';
	export default {
		name: 'Mheader',
		data() {
			return {
				city: '搜鹭合伙人',
				search: '',
			};
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				unreadcount: state => state.user.unreadcount,
			}),
		},
		mounted() {
			// this.getUnreadcount()
		},
		methods: {
			async getUnreadcount() {
				const { success, list, pageCount } = await getmsgtitle({
					pageSize: 100,
					pageIndex: 1
				})
				if (!list || list.length == 0) return
				let totalAcount = 0;
				list.forEach(item => {
					totalAcount += Number(item.unreadcount);
				})
				this.$store.commit('user/SET_UNREAD', totalAcount)
			},
			getLocation() {
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
					}
				});
			},
			goChat() {
				this.openURL({ openUrl: 'https://work.weixin.qq.com/kfid/kfcfc1ed477fc398781' })
				// const userID = this.userinfo.userid; // 当前用户ID
				// const kfID = this.getConfig(999); // 客服ID
				// console.log('userID', userID)
				// console.log('kfID', kfID);
				// // this.Jump('/pages/chat/list')
				// if (Number(userID) == Number(kfID)) {
				// 	this.Jump('/pages/chat/list')
				// } else {
				// 	this.Jump({
				// 		url: '/pages/chat/chat',
				// 		params: {
				// 			type: 1,
				// 			touid: kfID,
				// 			touserName: '平台客服'
				// 		}
				// 	})
				// }
			},
			getQrcode() {
				let that = this;
				let datas = '';
				// #ifdef APP-PLUS
				uni.scanCode({
					success: ({ result }) => {
						console.log('result===>', result)
						// if (result.indexOf('pages/mine/qrcodePay/qrcodePay?id=') != -1) {
						// 	let url = result.split('/#')
						// 	return that.Jump(url[1] + '&plat=1')
						// }
					}
				});
				// #endif
				// #ifndef APP-PLUS
				uni.chooseImage({
					sizeType: ['original'],
					count: 1,
					success: function(res) {
						uni.showLoading()
						const tempFilePaths = res.tempFilePaths
						qrcode.decode(tempFilePaths[0]);
						qrcode.callback = function(img) {
							uni.hideLoading()
							if (img == "error decoding QR Code") {
								that.Toast("识别二维码失败，请重试！")
							} else {
								let result = img.split(",");
								console.log(result[0])
								that.openURL({
									openUrl: result[0] + '&plat=1'
								})

							}
						}
					}
				});
				// #endif
			},
		},

	}
</script>

<style lang="scss">
	.topNav {
		padding: 12rpx 24rpx;

		.msg_icon {
			position: relative;

			.point {
				width: 15rpx;
				height: 15rpx;
				border: 1rpx solid #FFFFFF;
				background-color: #FA2B47;
				border-radius: 50%;
			}

			.position {
				position: absolute;
				top: 0rpx;
				right: -16rpx;
				margin-right: 10rpx;
			}
		}

		.address {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin-right: 27rpx;
		}

		.search-Item {
			flex: 1;
			background: #F0F0F0;
			border-radius: 30rpx;
			padding: 16rpx 30rpx;

			input {
				flex: 1;
				padding-left: 17rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
			}

			.placeholder-class {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #C5C5C5;
			}
		}
	}

	.pointState {
		line-height: 32rpx;
		text-align: center;
		position: absolute;
		background-color: red;
		width: 32rpx;
		height: 32rpx;
		right: -5rpx;
		font-size: 21rpx;
		color: #fff !important;
		top: -5rpx;
		border: 2rpx solid #fff;
		border-radius: 100rpx;
	}
</style>